<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="checkbox-container">
        <input type="checkbox">
        <label for="">苹果</label>
        <input type="checkbox">
        <label for="">香蕉</label>
        <input type="checkbox">
        <label for="">草莓</label>
    </div>
    <div>
        <input type="checkbox" id="mainCheckbox"><label for="">全选</label>
        <button id="all">全选</button>
        <button id="invert">反选</button>
        <button id="not">全不选</button>
    </div>

    <script>
        const allEle = document.querySelector('#all')
        const invertEle = document.querySelector('#invert')
        const notEle = document.querySelector('#not')
        const mainCheckboxEle = document.querySelector('#mainCheckbox')
        const checkboxEle = document.querySelectorAll('.checkbox-container>[type=checkbox]')


        mainCheckbox.onchange = function () {
            checkboxEle.forEach(item => {
                item.checked = mainCheckbox.checked;
            })
        }

        allEle.onclick = function () {
            checkboxEle.forEach(item => {
                item.checked = true;
            })
        }
        invertEle.onclick = function () {
            checkboxEle.forEach(item => {
                item.checked = !item.checked;
            })
        }
        notEle.onclick = function () {
            checkboxEle.forEach(item => {
                item.checked = false;
            })
        }
    </script>
</body>

</html>